<!-- 订单信息 -->
<template>
	<view class="outer">
		<!-- 地址栏 -->
		<view class="header">
			<text>收货人</text>
			<input type="text" v-model="userName" placeholder="请填写收货人">
			<text>手机号</text>
			<input type="text" v-model='phone' maxlength="11" placeholder="请填写手机号">
			<text>地址栏</text>
			<input type="text" v-model="address" placeholder="请填写地址">
		</view>
		<!-- 商品信息栏 -->
		<view class="shop-info">
			<view class="shop-item">
				<ul>
					<li v-for="(item,index) in shopList" :key='index'>
						<view class="item">
							<view class="item-info">
								<text class="text-strong">{{item.name}}</text>
								<text class="text-grey">总共{{item.number}}个</text>
								<text class="text-orange-strong">￥{{item.amount}}</text>
							</view>
						</view>
					</li>
				</ul>
			</view>
			<view class="shop-item">
				<view class="select" v-for="(item,index) in style" :key="index">
					<view class="select-info">
						<span class='select-title'>{{item.name}}</span>
						<span class="selector" :class="{ active:item.statusCurrent == cindex }"
							v-for="(citem,cindex) in item.value" :key="cindex"
							@click="selectChange(item.value,cindex)">{{citem}}</span>
					</view>
				</view>
			</view>
			<view class="info">
				<!-- 价格优惠券栏 -->
				<view class="num-price">
					<view class="price">
						<text>总计：</text>
						<text class="total">￥{{totalPrice||0.00}}</text>
					</view>
					<template>
						<view class="coupon">
							<text>优惠券：</text>
							<picker @change="bindPickerChange" :disabled="isDis" :value="index" :range="couponList"
								range-key='name'>
								<view class="uni-input">{{couponList[index].name || '无优惠券'}}</view>
							</picker>
						</view>
					</template>
				</view>
			</view>
		</view>
		<!-- 支付按钮 -->
		<view class="footer">
			<view class="buy" @click="buy">
				<text>立即购买</text>
			</view>
		</view>
		<u-popup :show="show" mode="center" @close="close" @open="open">
			<view class="pay-mode">
				<button type="primary" @click="selectPayMethod(2)">商家配送</button>
				<button type="primary" @click="selectPayMethod(1)">自提</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 商品信息
				shopList: {},
				// 优惠卷列表
				couponList: [],
				index: "",
				// 是否禁用
				isDis: false,
				totalPrice: 0,
				userName: '',
				address: '',
				phone: '',
				show: false,
				style: [{
						name: '支付方式',
						value: ['微信', '支付宝'],
						statusCurrent: 0
					},
				]
			}
		},
		methods: {

			// 获取优惠卷信息
			getCouponList() {
				this.$ajax.getCouponList.get().then(res => {
					res.data = res.data.map((item, index) => {
						item.name = "优惠券" + (index + 1) + '：减' + item.price + '元'
						return item
					})
					this.couponList = res.data
				})
			},

			// 选择优惠券选项
			bindPickerChange(event) {
				console.log(event);
				this.index = event.detail.value;
				this.totalPrice -= this.couponList[this.index].price;
				this.isDis = true
			},

			close() {
				this.show = false
			},

			// 购买信息
			buy() {
				if (this.address == '') {
					uni.showToast({
						title: '请填写地址！',
						icon: 'none'
					})
					return;
				}
				if (this.phone == '') {
					uni.showToast({
						title: '请填写手机号！',
						icon: 'none'
					})
					return;
				}
				if (this.userName == '') {
					uni.showToast({
						title: '请填写收货人！',
						icon: 'none'
					})
					return;
				}
				this.show = true;
			},

			// 选择支付方式
			selectPayMethod(index) {
				this.show = false;
				this.$ajax.postOrder.post({
					address: this.address,
					payMethod: index.toString(),
					phone: this.phone,
					amount: this.totalPrice,
					consignee: this.userName
				}).then(res => {
					uni.showToast({
						title: '购买成功！',
						icon: 'success'
					})
					this.show = false;
					if (this.index != '') {
						this.$ajax.delCoupon.post(this.couponList[this.index].id).then(res => {
							uni.showToast({
								title: '优惠卷使用成功！',
								icon: 'success'
							});

						})
					}
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/index/index"
						})
					}, 2000)
				})
			},
			
			selectChange(array, index) {
				this.style.filter(item => {
					if (item.value == array) {
						item.statusCurrent = index
					}
				})
				// 强制页面刷新
				this.$forceUpdate()
			},
		},
		onLoad(option) {
			let shopInfo = JSON.parse(decodeURIComponent(option.info));
			this.shopList = shopInfo;
			this.shopList.map(item => {
				this.totalPrice += Number((item.amount * item.number))
			})
			this.getCouponList();
		}
	}
</script>

<style lang="scss" scoped>
	.outer {
		background-color: #f5f5f5;
	}

	.header {
		padding: 20rpx 20rpx 20rpx 20rpx;
		margin: 15rpx;
		background-color: #fff;
		border-radius: 10rpx;

		text {
			font-weight: bolder;
			font-size: 18px;
		}
	}


	.shop-info {
		background-color: #f5f5f5;
		overflow: auto;
		padding: 0 0 150rpx 0;

		.shop-item {
			padding: 20rpx 20rpx 20rpx 20rpx;
			margin: 15rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.item {
				display: flex;
				margin: 0 0 10rpx 0;

				.item-info {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: flex-start;

					.text-strong {
						font-weight: 650;
					}

					.text-grey {
						color: #aaa;
					}

					.text-orange-strong {
						font-weight: 600;
						color: #ee651b;
					}
				}
			}
			
			.select {
			
				line-height: 100rpx;
			
				.select-info {
					display: flex;
					justify-content: space-around;
					align-items: center;
				}
			
				.select-title {
					margin-right: 20rpx;
					flex:1;
					display: inline-block;
				}
			
				.selector {
					height: 60rpx;
					line-height: 60rpx;
					display: inline-block;
					border: 1px solid transparent;
					width: 160rpx;
					color: #6d86c4;
					text-align: center;
					border-radius: 20rpx;
					margin-right: 20rpx;
					background-color: #f5f5f5;
			
					&.active {
						background-color: #f7f9ff;
						border: 1px solid #6d86c4;
					}
				}
			}
		}

		.info {
			.num-price {
				padding: 20rpx 20rpx 20rpx 20rpx;
				margin: 15rpx;
				background-color: #fff;
				border-radius: 10rpx;

				text {
					display: inline-block;
					font-weight: bolder;
					padding: 0 0 20rpx 0;
				}

				.price {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 0 20rpx 0;
				}

				.total {
					color: #e06e11;
					font-weight: bolder;
					float: left;
					// width: 50%;
				}

				.coupon {
					display: flex;
					justify-content: space-between;

					text {
						display: inline-block;
						font-weight: bolder;
						padding: 0 0 20rpx 0;
					}
				}
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		height: 100rpx;
		z-index: 1000;
		display: flex;
		justify-content: flex-end;
		padding: 20rpx 10rpx 10rpx 10rpx;

		.buy {
			line-height: 100rpx;
			display: flex;
			width: 70%;
			align-items: center;
			justify-content: center;
			text-align: center;
			margin-right: 20rpx;
			color: #fff;
			background-color: #6d86c4;
			width: 40%;
			border-radius: 50rpx;
		}
	}

	.pay-mode {
		display: flex;
		width: 250px;
		height: 300px;
		justify-content: space-around;
		align-items: center;

		button {
			height: 60px;
			line-height: 60px;
		}
	}
</style>
